/*
 * @Author: your name
 * @Date: 2022-02-20 21:48:33
 * @LastEditTime: 2022-02-22 10:44:36
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \react-1910b\day01\src\App.js
 */

// 在react中有函数组件还有类组件，函数组件在react16.0只可以做展示用，没有自己的状态，
// react中还有一种组件叫类组件，类组件是咱们这个月的重点，他有自己的状态，也有生命周期
// 使用快捷键rce可以快速生成一套reac类组件模板
// 在react里使用的是jsx语法，jsx语法就是html和js混写，遇到<>解析为html，遇到{}解析为js
// 在react中组件的后缀名可以是jsx或者js
// 在组件中根节点只能有一个
import React from 'react'
import Son from "./page/son.jsx"
// let flag = true
import axios from "axios"
class App extends  React.Component {
  //  constructor(props){
  //    super(props)
  //    this.state = {
  //      age:"20"
  //    }
  //  }
  // 在react中在state中声明变量,每一个类都有一个constructor，如果自己不写，reat会帮助咱们隐式生成一个
  // 类比成vue里的data
  componentDidMount(){
      axios.get("/list1").then(res=>{
        console.log(res);
      })
  }
  state = {
    name : "zhangsn",
    age:"100",
    arr:[
      {
        tit:"标题1",
        con:"内容1"
      },
      {
        tit:"标题2",
        con:"内容2"
      },
      {
        tit:"标题3",
        con:"内容3"
      },
    ],
    changeIndex:0
  }
  // 在react里所以的方法都和render平级
  changeName(){
    console.log(this,222)
    // 修改state里的变量
    this.setState({
      name:this.state.name + "feng"
    })
  }
  changeAge = ()=>{
    console.log(this,1111)
     this.setState({
       age:"121"
     })
  }
  changeINDEX(ind){
    // console.log(ind)
    // this.state.changeIndex = ind // react 不支持这么修改，在类组件里只能通过this.setState修改
    // this.setState({
    //   changeIndex:ind
    // },()=>{
    //   // this.setState可能是异步的，有两个参数，第一个参数就做正常修改，第二个参数用于拿到state的最新值
    //   console.log(this.state.changeIndex)
    // })

    setTimeout(()=>{
      this.setState({
        changeIndex:ind
      })
      console.log(this.state.changeIndex)
    },0)
   

  }
  fn2(data){
    console.log(data)
  }
  render() {
    let {arr,changeIndex,age} = this.state
    return (
      <div>
        <Son send={age} fn1={this.fn2.bind(this)}></Son>
         {/* 标题 */}
         {
           arr&&arr.length>0?arr.map((item,index)=>{
                return <span key={index} onClick={this.changeINDEX.bind(this,index)} className={index==changeIndex?'active':""}>{item.tit}</span>
           }):"暂无数据"
         }
         {/* 内容区域 */}
         <div>{arr[changeIndex].con}</div>

      </div>
    
    )
  }
}

export default App